<template>
  <div class="router-wrap">
    <dg-time-line :data="data" :round-background="roundBackground" :interval="interval" user-defined>
      <template slot-scope="scope">
        <p class="title" :class="{ active: currentIndex == scope.data.index }" @click="handleTitleTo(scope.data)">
          {{ scope.data.label }}
        </p>
      </template>
    </dg-time-line>
  </div>
</template>

<script>
export default {
  name: 'item-router',
  props: {},
  watch: {},
  data() {
    return {
      currentIndex: 0,
      lastDotNode: null, // 活跃点之前的元素
      data: [
        {
          label: '基本信息',
          index: 0,
          type: 'baseinfo'
        },
        {
          label: '领导批示',
          index: 1,
          type: 'leaderComment'
        },
        {
          label: '案事件人员',
          index: 2,
          type: 'peopleInfoList'
        },
        {
          label: '涉及对象统计',
          index: 3,
          type: 'involveObjStatistics'
        },
        {
          label: '呈报意见',
          index: 4,
          type: 'reportInformation'
        },
        {
          label: '研判意见',
          index: 5,
          type: 'judgeOpinions'
        },
        {
          label: '签收反馈情况',
          index: 6,
          type: 'signFeedback'
        },
        {
          label: '关联专题',
          index: 7,
          type: 'relationSubject'
        },
        {
          label: '动态信息评估',
          index: 8,
          type: 'dynamicAssess'
        },
        {
          label: '关联信息',
          index: 9,
          type: 'releteInformation'
        },
        {
          label: '关联事件人员信息',
          index: 10,
          type: 'releateEventInfoList'
        },
        {
          label: '值班信息',
          index: 11,
          type: 'dutyInformation'
        }
      ],
      roundBackground: '#C2933C', // 圆点颜色
      interval: 50 // 间距
    };
  },
  methods: {
    handleTitleTo(data) {
      this.currentIndex = data.index;
      this.$emit('titleClick', data);
    }
  }
};
</script>
<style lang="scss" scoped>
.router-wrap {
  position: fixed;
  top: 190px;
  right: 65px;
  .title {
    cursor: pointer;
  }
  .active {
    color: #409eff;
  }
}
/deep/.dg-time-line__dot {
  left: 2px;
  border: none;
  background-color: #e8e8e8;
  // background-color: #409EFF;
}
/deep/.dg-time-line__line {
  top: 16px;
  height: 42px !important;
}
</style>
